<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>5.更新时的一个问题</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <button @click="updateMei">更新马冬梅的信息</button>
        <ul>
            <li v-for="(person,index) in personList" :key="person.id">
                {{person.name}} -- {{person.age}} --{{person.sex}}
            </li>
        </ul>

        <hr>


        <script type="text/javascript">
            //  用 computed 实现
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        personList: [
                            { id: '001', name: '马冬梅', age: 25, sex: '女' },
                            { id: '002', name: '周冬雨', age: 27, sex: '女' },
                            { id: '003', name: '周杰伦', age: 18, sex: '男' },
                            { id: '004', name: '温兆伦', age: 15, sex: '男' }
                        ]
                    }
                },
                methods: {
                    updateMei() {
                        // this.personList[0].name = '马老师'; 奏效，可以的
                        // this.personList[0].age = 50; 奏效，可以的
                        // this.personList[0].sex = '男'; 奏效，可以的

                        //  当前方法不生效
                        // this.personList[0] = { id: '001', name: '马老师', age: 50, sex: '男' };

                        this.personList.splice(0, 1, { id: '001', name: '马老师', age: 50, sex: '男' });
                    }
                },

            });
        </script>

</body>

</html>